/**
 * Created by zhouli on 18/2/3
 * Email li.zhou@huilianyi.com
 * 组织架构搜索之后的人员部门混合显示
 * 只显示列表，点击右边展示详情
 */
import React from 'react';
import {messages} from "share/common";
import {Icon} from 'antd';
import 'styles/components/template/select-depment-or-person/org-search-list.scss';

class OrgSearchList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},//传入的数据:包含搜索的部门或者人
    };
  }

  componentWillMount() {
    this.setState({data: this.props.searchList});
  }

  componentWillReceiveProps(nextProps) {
    this.setState({data: nextProps.searchList});
  }

  //选择这个
  selectedHandle = (item) => {
    this.props.selectedHandle(item);
  };

  //渲染搜索的部门
  renderSearchListDep(list) {
    if (list.length < 1) {
      if (this.props.isSearchOver) {
        return (
          <div className="no-dep"><Icon type="frown"/>
            {messages('components.key535'/*没有搜索到部门*/)}
          </div>
        )
      } else {
        return (
          <div className="no-person"><Icon type="frown"/>
            {messages('components.key536'/*正在搜索...*/)}
          </div>
        )
      }
    }
    return list.map((item) => {
      if (item.nodeDisabled) {
        return (
          <div className="re-dep-item-disabled" key={item.departmentOID}>
            <div className="type-icon">
              <Icon type="folder"/>
            </div>
            <div className="name">{item.name}</div>
            <div className="clear"/>
          </div>
        )
      } else {
        return (
          <div className={item.actived ? "re-dep-item-active" : "re-dep-item"} key={item.departmentOID}
               onClick={() => {
                 this.selectedHandle(item)
               }}>
            <div className="type-icon">
              <Icon type="folder"/>
            </div>
            <div className="name">{item.name}</div>
            <div className="clear"/>
          </div>
        )
      }
    })
  }

  //渲染搜索的人
  renderSearchListPerson(list) {
    let searchType = this.props.searchType;
    if (list.length < 1) {
      if (this.props.isSearchOver) {
        return (
          <div className="no-person"><Icon type="frown"/>
            {messages('components.key537'/*没有搜索到员工*/)}
          </div>
        )
      } else {
        return (
          <div className="no-person"><Icon type="frown"/>
            {messages('components.key536'/*正在搜索...*/)}
          </div>
        )
      }
    }
    return list.map((item) => {
      if (item.nodeDisabled) {
        return (
          <div className="re-person-item-disabled" key={item.userOID+item.id}>
            <div className="type-icon">
              <Icon type="user"/>
            </div>
            <div className="name">{item.fullName}{searchType ? "-" + item.position : ""}</div>
            <div className="clear"/>
          </div>
        )
      } else {
        return (
          <div className={item.actived ? "re-person-item-active" : "re-person-item"} key={item.userOID+item.id}
               onClick={() => {
                 this.selectedHandle(item)
               }}>
            <div className="type-icon">
              <Icon type="user"/>
            </div>
            <div className="name">{item.fullName}{searchType ? "-" + item.position : ""}</div>
            <div className="clear"/>
          </div>
        )
      }

    })
  }

  isRenderPerson = (onlyDep, data) => {
    if (onlyDep) {
      return (<div/>);
    } else {
      return (
        <div className="list-person">
          <div className="list-person-title">
            {messages('components.key538'/*成员*/)}
          </div>
          <div className="list-person-wrap">
            {this.renderSearchListPerson(data.personList)}
          </div>
        </div>
      )
    }
  }
  isRenderDep = (onlyPerson, data) => {
    if (onlyPerson) {
      return (<div/>);
    } else {
      return (
        <div className="list-dep">
          <div className="list-dep-title">
            {messages('components.key539'/*部门*/)}
          </div>
          <div className="list-dep-wrap">
            {this.renderSearchListDep(data.depList)}
          </div>
        </div>
      )
    }
  }

  render() {
    const {onlyPerson, onlyDep} = this.props;
    const {data} = this.state;
    return (
      <div className="org-search-list">
        {this.isRenderPerson(onlyDep, data)}
        {this.isRenderDep(onlyPerson, data)}
      </div>
    )
  }
}

OrgSearchList.propTypes = {
  searchType: React.PropTypes.string,// position 如果传入这个参数，查询岗位信息
  isSearchOver: React.PropTypes.bool,//是否搜索完毕
  selectedHandle: React.PropTypes.func.isRequired,//点击选择之后的回调
  searchList: React.PropTypes.object.isRequired,
  onlyDep: React.PropTypes.bool,//是否只显示部门，默认false显示部门与人
  onlyPerson: React.PropTypes.bool,//是否只显示选人，默认false显示部门与人
};
OrgSearchList.defaultProps = {
  isSearchOver: false,
  onlyDep: false,
  onlyPerson: false
};
//加入多语言
export default OrgSearchList;
